<template>
  <div class="card">
    <div class="title">添加茶种</div>
    <div class="body">
      <div class="base-message">
        <el-form label-width="150px" :model="formData">
          <el-form-item label="品种名称（中文名）">
            <el-input
              v-model="formData.chineseName"
              placeholder="请输入中文名！"
              style="width: 280px"
            ></el-input>
          </el-form-item>
          <el-form-item label="品种名称（拉丁名）">
            <el-input
              v-model="formData.latinName"
              placeholder="请输入拉丁名！"
              style="width: 280px"
            ></el-input>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="formData.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="种植时间">
            <el-date-picker
              v-model="formData.growYear"
              value-format="yyyy-MM-dd"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="来源地">
            <v-distpicker
              @selected="onSelected"
              :province="formData.province"
              :city="formData.city"
              :area="formData.county"
            >
            </v-distpicker>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址！"
              style="width: 400px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="base-content">
        <vue-ueditor-wrap
          v-model="msg"
          :config="editorConfig"
          @ready="ready"
          @before-init="addCustomUI"
        ></vue-ueditor-wrap>
      </div>
    </div>
  </div>
</template>

<script>
import { province } from "@/datas/index";
import SelectArea from "./components/select-area";
// 1、引入VueUeditorWrap组件
import VueUeditorWrap from "vue-ueditor-wrap";

export default {
  components: {
    SelectArea,
    VueUeditorWrap,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      gradeList: [
        {
          value: "国家级",
          label: "国家级",
        },
        {
          value: "省级",
          label: "省级",
        },
      ],
      province,
      formData: {},

      // 3、v-model绑定数据
      msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
      // 4、根据项目需求自行配置,具体配置参见ueditor.config.js源码或 http://fex.baidu.com/ueditor/#start-config
      editorConfig: {
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        theme: "wx",
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL: "/static/UEditor/",
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "//ueditor.szcloudplus.com/cos",
        toolbars: [
          [
            "more",
            "|",
            "fontsize",
            "|",
            "blockquote",
            "horizontal",
            "|",
            "removeformat",
            "|",
            "insertvideo2",
            "insertimage2",
            "fullscreen",
          ],
          [
            "bold",
            "italic",
            "underline",
            "forecolor",
            "backcolor",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "insertorderedlist",
            "insertunorderedlist",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
          ],
        ],
      },
    };
  },
  methods: {
    // 5、 你可以在ready方法中拿到editorInstance实例,所有API和官方的实例是一样了。http://fex.baidu.com/ueditor/#api-common
    ready(editorInstance) {
      console.log(`实例${editorInstance.key}已经初始化:`, editorInstance);
    },
    // 6. 查看绑定的数据
    showData() {
      alert(this.msg);
      console.log(this.msg);
    },
    // 7. 借助 before-init 钩子，你可以实现对 UEditor 的二次开发，会在 scripts 加载完毕之后、编辑器初始化之前触发，以 编辑器 id 和 配置参数 作为入参
    addCustomUI(editorId, editorConfig) {
      console.log(
        editorId + "的配置参数是:",
        JSON.stringify(editorConfig, null, 2)
      );
      function moreBtnOnClick(editor) {
        var e = editor.ui.getDom("toolbarbox");
        if (UE.dom.domUtils.hasClass(e, "show-edui-more")) {
          UE.dom.domUtils.removeClasses(e, "show-edui-more");
        } else {
          UE.dom.domUtils.addClass(e, "show-edui-more");
        }
      }

      function insertVideo2BtnOnClick(editor) {
        alert("插入视频");
      }

      function insertImage2BtnOnClick(editor) {
        alert("插入图片");
      }

      // 更多
      UE.registerUI("more", function (editor, uiName) {
        // 注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            moreBtnOnClick(editor);
          },
        });
        var btn = new UE.ui.Button({
          name: uiName,
          title: "更多",
          cssRules: "",
          onclick: function () {
            editor.execCommand(uiName);
          },
        });
        return btn;
      });

      // 插入视频
      UE.registerUI("insertvideo2", function (editor, uiName) {
        editor.registerCommand(uiName, {
          execCommand: function () {
            insertVideo2BtnOnClick(editor);
          },
        });
        var btn = new UE.ui.Button({
          name: uiName,
          title: "视频",
          cssRules: "",
          onclick: function () {
            editor.execCommand(uiName);
          },
        });
        return btn;
      });

      // 插入图片
      UE.registerUI("insertimage2", function (editor, uiName) {
        editor.registerCommand(uiName, {
          execCommand: function () {
            insertImage2BtnOnClick(editor);
          },
        });
        var btn = new UE.ui.Button({
          name: uiName,
          title: "图片",
          cssRules: "",
          onclick: function () {
            editor.execCommand(uiName);
          },
        });
        return btn;
      });
      // 1. 自定义按钮
      window.UE.registerUI(
        "test-button" + editorId,
        function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () {
              editor.execCommand(
                "inserthtml",
                `<span style="color: #${Math.random()
                  .toString(16)
                  .substr(
                    -3
                  )};">这是一段由自定义按钮添加的文字，你点击的编辑器ID是${editorId}</span>`
              );
            },
          });

          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: "鼠标悬停时的提示文字",
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules:
              "background-image: url('/static/test-button.png') !important;background-size: cover;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName);
            },
          });

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener("selectionchange", function () {
            var state = editor.queryCommandState(uiName);
            if (state === -1) {
              btn.setDisabled(true);
              btn.setChecked(false);
            } else {
              btn.setDisabled(false);
              btn.setChecked(state);
            }
          });

          // 因为你是添加 button，所以需要返回这个 button
          return btn;
        },
        0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );

      // 2. 自定义表格居中按钮
      window.UE.registerUI(
        "table-center-button" + editorId,
        function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () {
              var tables = editor.document.querySelectorAll("table");
              if (tables.length) {
                tables.forEach((table) => {
                  table.style.margin = "0 auto";
                });
              } else {
                editor.trigger("showmessage", {
                  content: "没有表格",
                  timeout: 2000,
                });
              }
            },
          });

          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: "点击设置表格居中",
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules:
              "background-image: url('/static/center.png') !important;background-size: cover;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName);
            },
          });

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener("selectionchange", function () {
            var state = editor.queryCommandState(uiName);
            if (state === -1) {
              btn.setDisabled(true);
              btn.setChecked(false);
            } else {
              btn.setDisabled(false);
              btn.setChecked(state);
            }
          });

          // 因为你是添加 button，所以需要返回这个 button
          return btn;
        },
        1 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );

      // 3. 自定义弹窗
      window.UE.registerUI(
        "test-dialog" + editorId,
        function (editor, uiName) {
          // 创建 dialog
          var dialog = new window.UE.ui.Dialog({
            // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
            iframeUrl: "/static/customizeDialogPage.html",
            // 需要指定当前的编辑器实例
            editor: editor,
            // 指定 dialog 的名字
            name: uiName,
            // dialog 的标题
            title: "这是一个自定义的 Dialog 浮层",
            // 指定 dialog 的外围样式
            cssRules: "width:600px;height:300px;",
            // 如果给出了 buttons 就代表 dialog 有确定和取消
            buttons: [
              {
                className: "edui-okbutton",
                label: "确定",
                onclick: function () {
                  dialog.close(true);
                },
              },
              {
                className: "edui-cancelbutton",
                label: "取消",
                onclick: function () {
                  dialog.close(false);
                },
              },
            ],
          });

          // 参考上面的自定义按钮
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "鼠标悬停时的提示文字",
            cssRules: `background-image: url('/static/test-dialog.png') !important;background-size: cover;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });

          return btn;
        },
        2 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */,
        editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );
    },
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.form.province = province.value;
      this.form.city = city.value;
      this.form.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
  }
  .body {
    width: 100%;
    padding: 60px;
    .base-message {
    }
  }
}
</style>
